import React from 'react';
import {inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {Button, Menu, Dropdown, Icon, Select, Modal} from 'antd';
import {WeaInputSearch, WeaSelect, WeaBrowser} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
import SearchFavourite from '../../util/SearchFavourite';
import BrowserDict from '../../constants/BrowserDict';

const confirm = Modal.confirm;
const listBtns = BrowserDict.listBtns;

@inject('sysFavouriteStore', 'favouriteDialogStore', 'favouriteBrowserStore', 'myFavouriteStore', 'favouriteDirStore')
@observer
export default class SysFavouriteBar extends React.Component {
    /**
     * “添加”下拉按钮的点击事件
     * @param evt
     */
    handleMenuClick = (evt) => {
        this.setState({
            favType: evt.key,
        });
    }

    /**
     * 下拉框点击选项的事件
     * @param value
     */
    handleTypeChange = (value) => {
        const {sysFavouriteStore} = this.props;
        sysFavouriteStore.setFavouriteType(value);
    }

    /**
     * 搜索的事件
     * @param value
     */
    handleOnSearch = (value) => {
        const {sysFavouriteStore} = this.props;
        const {favtype} = sysFavouriteStore;
        SearchFavourite.setConditions({pagename: value, favtype});
        const isinit = true;
        const isreload = false;
        const searchFavourite = new SearchFavourite(sysFavouriteStore);
        const params = {isinit, isreload};
        searchFavourite.load(params);
    }

    /**
     * 删除操作
     */
    handleOnDelete = () => {
        const {sysFavouriteStore} = this.props;
        const {selectedIds} = sysFavouriteStore;
        confirm({
            content: `${getLabel(388216, '删除后不可恢复，您确认删除选中的记录吗？')}`,
            onOk() {
                sysFavouriteStore.deleteFavourite(selectedIds.join());
            },
            onCancel() {
            },
        });
    }

    /**
     * 移动操作
     */
    handleOnMove = () => {
        const {sysFavouriteStore, favouriteDialogStore, favouriteBrowserStore} = this.props;
        let {selectedIds} = sysFavouriteStore;
        selectedIds = mobx.toJS(selectedIds);
        // 设置需要移动的数据
        sysFavouriteStore.setMoveIds(selectedIds);
        // 先清空数据
        favouriteBrowserStore.destroyBrowser();
        // 显示窗口
        favouriteDialogStore.openBrowserDialog();
        // 显示加载中的遮罩
        favouriteBrowserStore.toggleSpinning(true, `${getLabel(82275, '数据加载中，请稍候...')}`);
        // 加载目录树的数据
        favouriteBrowserStore.loadTreedata('0');
    }

    handleBrowserChange = (ids, names, datas) => {
        const {favType} = this.state;
        const {sysFavouriteStore, favouriteDirStore} = this.props;
        const {selectedKey} = favouriteDirStore;
        const tempids = [];
        const tempnames = [];
        datas.forEach((item) => {
            const {id, name} = item;
            tempids.push(id);
            tempnames.push(name);
        });

        sysFavouriteStore.addSysFavourites(tempids, selectedKey, tempnames, favType);
    }


    /**
     * 添加按钮的下拉菜单
     * @returns {XML}
     */
    renderMenu = () => {
        const {myFavouriteStore} = this.props;
        let {addBtnList} = myFavouriteStore;
        addBtnList = mobx.toJS(addBtnList);

        const menuItems = addBtnList.map((item) => {
                const browserParams = listBtns[item.id];
                return (
                    <Menu.Item
                        ecId={`${this && this.props && this.props.ecId || ''}_undefined@iqtkm7@${item.id}`}
                        key={item.id}
                        className="sysfav-bar-item"
                    >
                        <WeaBrowser
                            ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@60lmds@${item.id}`}
                            {...browserParams}
                            onChange={this.handleBrowserChange}
                            className="sysfav-bar-item-browser"
                        >
                            {item.name}
                        </WeaBrowser>
                    </Menu.Item>
                );
            },
        );
        return (
            <Menu
                ecId={`${this && this.props && this.props.ecId || ''}_Menu@uh8v1k`}
                onClick={this.handleMenuClick}
            >{menuItems}</Menu>
        );
    }

    /**
     *  收藏类型的下拉框
     * @returns {*}
     */
    renderOpts = () => {
        const {myFavouriteStore} = this.props;
        let {typeList} = myFavouriteStore;
        typeList = mobx.toJS(typeList);
        const options = typeList.map((item) => {
            const obj = {};
            obj.key = item.id;
            obj.showname = item.name;
            return obj;
        });
        return options;
    }

    /**
     * 移动、删除按钮
     * @returns {Array}
     */
    renderBtns = () => {
        const {myFavouriteStore, sysFavouriteStore} = this.props;
        const {moveBtnName, deleteBtnName} = myFavouriteStore;
        const {selectedIds} = sysFavouriteStore;
        const btns = [];
        if (selectedIds.length > 0) {
            btns.push(
                <Button
                    ecId={`${this && this.props && this.props.ecId || ''}_Button@36d2n8@move`}
                    type="primary"
                    onClick={this.handleOnMove}
                >
                    {moveBtnName}
                </Button>
            );

            btns.push(
                <Button
                    ecId={`${this && this.props && this.props.ecId || ''}_Button@ivt7gf@delete`}
                    type="primary"
                    style={{'margin-left': '15px'}}
                    onClick={this.handleOnDelete}
                >
                    {deleteBtnName}
                </Button>
            );
        } else {
            btns.push(
                <Button
                    ecId={`${this && this.props && this.props.ecId || ''}_Button@f0j5pl@move`}
                    type="primary"
                    disabled="disabled"
                >
                    {moveBtnName}
                </Button>
            );

            btns.push(
                <Button
                    ecId={`${this && this.props && this.props.ecId || ''}_Button@vfc132@delete`}
                    type="primary"
                    disabled="disabled"
                    style={{'margin-left': '15px'}}
                >
                    {deleteBtnName}
                </Button>
            );
        }
        return btns;
    }

    render() {
        const menu = this.renderMenu();
        const opts = this.renderOpts();
        const btns = this.renderBtns();
        const {myFavouriteStore, sysFavouriteStore} = this.props;
        const {addBtnName} = myFavouriteStore;
        const {favtype} = sysFavouriteStore;

        return (
            <div className="sysfav-top-bar" ecId={`${this && this.props && this.props.ecId || ''}`}>
                <div className="sysfav-top-bar-common sysfav-top-bar-left">
                    <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@k7pt1v`} overlay={menu}>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0b650a`}>
                            <Icon
                                ecId={`${this && this.props && this.props.ecId || ''}_Icon@7tos3m`}
                                type="plus"
                            />{addBtnName}
                        </Button>
                    </Dropdown>

                    <WeaSelect
                        ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@hhbg80`}
                        options={opts}
                        value={favtype}
                        onChange={this.handleTypeChange}
                    />

                    <WeaInputSearch
                        ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@av26lq`}
                        onSearch={this.handleOnSearch}
                    />
                </div>

                <div className="sysfav-top-bar-common sysfav-top-bar-right">
                    {btns}
                </div>
            </div>
        );
    }
}
